<template>
  <a-flex vertical :gap="small">
    <a-flex :gap="small" :style="{ alignSelf: 'flex-end' }">
      <a-button @click="handleAddBubble">
        Add Bubble
      </a-button>

      <a-button @click="handleScrollToFirst">
        Scroll To First
      </a-button>
    </a-flex>

    <BubbleList
      ref="listRef"
      :style="{ maxHeight: '300px' }"
      :roles="roles"
      :items="bubbleItems"
    />
  </a-flex>
</template>

<script setup name="BubbleList">
import { ref, computed, h } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
import { BubbleList } from 'ant-design-x-vue'

const userOutlinedIcon = h(UserOutlined)

const roles = {
  ai: {
    placement: 'start',
    avatar: { icon: userOutlinedIcon, style: { background: '#fde3cf' } },
    typing: { step: 5, interval: 20 },
    style: {
      maxWidth: '600px',
    },
  },
  user: {
    placement: 'end',
    avatar: { icon: userOutlinedIcon, style: { background: '#87d068' } },
  },
}

const count = ref(3)
const listRef = ref(null)

const bubbleItems = computed(() => {
  return Array.from({ length: count.value }).map((_, i) => {
    const isAI = !!(i % 2)
    const content = isAI ? 'Mock AI content. '.repeat(20) : 'Mock user content.'

    return {
      key: i,
      role: isAI ? 'ai' : 'user',
      content,
    }
  })
})

const handleAddBubble = () => {
  count.value = count.value + 1
}

const handleScrollToFirst = () => {
  listRef.value?.scrollTo({ key: 0, block: 'nearest' })
}
</script>